<template>
  <div class="roleSetting-container">
    <div class="header-title">角色信息</div>
    <el-divider></el-divider>
    <div style="padding-left: 24px; max-width: 60%">
      <el-form ref="formRef" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="form.name" placeholder="最多10个字符"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="des">
          <el-input v-model="form.des" placeholder="最多100个字符"></el-input>
        </el-form-item>
        <el-form-item label="权限菜单" prop="check">
          <gradeCheckbox
            v-for="(item, index) in options.menus"
            :key="index"
            :title="item.menuName"
            :id="item.id"
            :options="item.menus"
            v-model="form.checks[index]"
            :index="index"
          ></gradeCheckbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="goBack">返回上一页</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  import gradeCheckbox from '@/components/GradeCheckbox'
  import { reactive, ref } from '@vue/reactivity'
  import { useRouter } from 'vue-router'
  import { onBeforeMount } from '@vue/runtime-core'
  import { useRoute } from 'vue-router'
  import { roleInfo, save } from '@/api/modules/role' //
  import { getAllMenus } from '@/api/user'
  import { ElMessage } from 'element-plus'
  export default {
    components: { gradeCheckbox },
    setup() {
      const route = useRoute()
      let id = ref(null)
      onBeforeMount(async () => {
        getMenus()
        if (route.query.id) {
          id.value = route.query.id
          loadData(id.value)
        }
      })
      // const options = { options1, options2, options3 }
      let form = reactive({
        name: '',
        des: '',
        checks: [],
        check: [],
      })
      let options = reactive({ menus: [] })
      const formRef = ref(null)

      const loadData = async function (id) {
        const res = await roleInfo({ id })
        form.des = res.data.describe
        form.name = res.data.roleName
        form.check = res.data.menus.split(',').map((item) => {
          return parseInt(item)
        })
        form.checks = initF()
      }

      const getMenus = async function () {
        const res = await getAllMenus()
        options.menus = res.data
        form.checks = initF()
      }

      function initF() {
        const tmp = []
        options.menus.map((item) => {
          const arr = []
          item.menus.map((element) => {
            if (form.check && form.check.includes(element.id))
              arr.push(element.id)
          })
          tmp.push(arr)
        })
        return tmp
      }

      const onSubmit = function () {
        formRef.value.validate((valid) => {
          if (valid) {
            let tmp = []
            form.checks.map((item) => {
              tmp = tmp.concat(item)
            })
            const params = {
              describe: form.des,
              roleName: form.name,
              menus: tmp.join(','),
              id: id.value,
            }
            console.log('params =' + JSON.stringify(params))
            save(params)
            ElMessage.success('提交成功！')
            goBack()
          } else {
            return false
          }
        })
      }
      const router = useRouter()
      const goBack = function () {
        router.go(-1)
      }

      // 至少选择一项权限
      const checkF = function (rules, value, cb) {
        let tmp = []
        form.checks.map((item) => {
          tmp = tmp.concat(item)
        })
        if (form.checks && tmp.length > 0) {
          cb()
        }
        cb(new Error('至少选择一项'))
      }
      const rules = {
        name: [
          { required: true, message: '请输入表单名称', trigger: 'blur' },
          { min: 0, max: 10, message: '最多10个字符', trigger: 'blur' },
        ],
        des: [{ min: 0, max: 100, message: '最多100个字符', trigger: 'blur' }],
        check: [
          {
            required: true,
            message: '至少选择一项',
            trigger: 'blur',
            validator: checkF,
          },
        ],
      }

      const checkChange = function (val) {
        form.checks[val.index] = val.value
      }
      return {
        options,
        form,
        onSubmit,
        rules,
        formRef,
        goBack,
        checkChange,
      }
    },
  }
</script>
<style lang="scss">
  .roleSetting-container {
    margin: 32px;
    background-color: white;
    overflow: hidden;
    .header-title {
      margin-top: 20px;
      margin-left: 11px;
    }
    .el-form-item__content {
      display: inline-block !important;
    }
    .el-input {
      // width: 30%;
    }
  }
</style>
